<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DownLoad</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css"
          href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/style.css')}}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/sweetalert2.min.css')}}">


</head>
<body>
<section class="channel-cover">
    <img src="{{ url_for('static',filename='img/banner.jpg')}}" alt="">
</section>

<section class="videso_section">
    <div class="info-pr-sec">
        <div class="container">
            <div class="row">
                <div class="col-md-7 p-3" style="font-size:20px;">
                    <h1 id="route"></h1>
                </div>
                <div class="col-md-5">
                    <div class="row">
                        <div class="col-4">
                            <button type="button" class="btn btn-block btn-default btn-xs" onclick="goToUpload()">
                                上传
                            </button>
                        </div>
                        <div class="col-4">
                            <button type="button" class="btn btn-block btn-default btn-xs" onclick="creatFolder()">
                                新文件夹
                            </button>
                        </div>
                        <div class="col-4">
                            <button type="button" class="btn btn-block btn-danger btn-xs delete">
                                删除
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-content p-0" id="myTabContent">
        <div class="tab-pane fade show active" id="vvideo_tabz" role="tabpanel" aria-labelledby="videos_taab">
            <div class="videso_tb_details">
                <div class="container">

                    {% if folderData | length > 0 %}
                    <div class="vidz_sec">
                        <h3>文件夹</h3>
                        <div class="vidz_list">
                            <div class="row">
                                {% for i in folderData %}
                                <div class="col-lg-2 col-md-2 col-sm-3 col-4 full_wdth">
                                    <div class="videoo">
                                        <div class="vid_thumbainl">
                                            <a href="{{ i.toSrc }}" title="">
                                                <img src="{{ url_for('static',filename='icon/folder.png') }}"
                                                     style="max-height:300px"/>
                                            </a>
                                        </div>
                                        <div class="video_info">
                                            <p style="word-wrap:break-word;">{{ i.folderName }}</p>
                                            <h4>文件夹</h4>
                                            <label class="m-1"><input name="folder" type="checkbox">多选</label>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    {% if data | length > 0 %}
                    <div class="vidz_sec">
                        <h3>文件</h3>
                        <div class="vidz_list">
                            <div class="row">
                                {% for i in data %}
                                <div class="col-lg-2 col-md-2 col-sm-3 col-4 full_wdth">
                                    <div class="videoo">
                                        <div class="vid_thumbainl">
                                            <a href="{{ url_for('static',filename=i.url) }}" title="">
                                                <img src="{{ i.imgSrc }}" style="max-height:300px"/>
                                                <span class="vid-time">{{ i.size }}</span>
                                                {% if not i.suffix == "" %}
                                                <span class="watch_later">
														<i>{{ i.suffix }}</i>
													</span>
                                                {% endif %}
                                            </a>

                                        </div>
                                        <div class="video_info">
                                            <p style="word-wrap:break-word;">{{ i.fileName }}</p>
                                            <h4>{{ i.suffix }}文件</h4>
                                            <label class="m-1"><input name="file" type="checkbox">多选</label>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>


<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<!--<script src="assetes/js/popper.min.js"></script>-->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="{{url_for('static', filename='js/common.js')}}"></script>
<script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="{{url_for('static', filename='js/es6-promise.min.js')}}"></script>
<script src="{{url_for('static', filename='js/sweetalert2.min.js')}}"></script>
<script>

    var route = "{{ route | safe }}"
    var domain = window.location.host;
    var list = route.split('/');
    var src = '/file'
    for (var i = 1; i < list.length; i++) {
        src += ('/' + list[i])
        $("#route").append('<a href="http://' + domain + src + '"><span style="color:#00BFFF">' + list[i] + '</span>/</a>')
    }

    function goToUpload() {
        window.open("http://" + domain + "/upload?where=" + b64Encode(route));
    }

    function creatFolder() {
        //jinjia2渲染此list
        list = {{folderData | safe}};
        swal({
            title: '请输入要创建的新文件夹的名字',
            input: 'text',
            showCancelButton: true,
            inputValidator: function (value) {
                return new Promise(function (resolve, reject) {
                    for (let i = 0; i < list.length; i++) {
                        if (list[i].folderName == value) {
                            reject('文件夹名字已经存在');
                        }
                    }
                    if (value) {
                        resolve();
                    } else {
                        reject('你还没有输入文件夹的名字');
                    }
                });
            }
        }).then(function (result) {
            if (result) {
                myAJAX(
                    "/createFolder",
                    {where: route, name: result},
                    function (data) {
                        buildReloadSWAL("success","成功创建了"+result+"文件夹")
                    },
                    function (e) {
                        swal("error", $.parseJSON(e.responseText)['error'], 'error')
                    }
                );
            }
        })
    }

    $(".delete").click(function () {
        let fileArray = [];
        let folderArray = [];
        //循环所有选中的值
        $('input[name="file"]:checked').each(function (index, element) {
            fileArray.push($(this).parent().siblings("p").text());

        });
        $('input[name="folder"]:checked').each(function (index, element) {
            folderArray.push($(this).parent().siblings("p").text());
        });
        if (fileArray.length + folderArray.length === 0) {
            swal("找不到对象", "你还没有选择要删除的对象", 'error');
            return;
        }
        swal({
            title: '你确定吗？',
            text: "你将要删除\n" + fileArray.join(' ') + '\n' + folderArray.join(' '),
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '确定删除',
            cancelButtonText: '取消'
        }).then(function (isConfirm) {
            if (isConfirm) {
                myAJAX(
                    '/d',
                    {w: b64Encode(route), fi: fileArray.join('*'), fo: folderArray.join('*')},
                    function (data) {
                        buildReloadSWAL('成功删除', "删除了\n" + fileArray.join(' ') + '\n' + folderArray.join(' '))
                    },
                    function (e) {
                        swal("error", $.parseJSON(e.responseText)['error'], 'error')
                    },
                );
            }
        });


    });

    function buildReloadSWAL(title, text){
        swal({
            title: title,
            text: text,
            type: 'success',
            confirmButtonColor: '#3085d6',
            confirmButtonText: 'OK'
        }).then(function () {
            window.location.reload();
        });
    }


    function myAJAX(url, data, success, error) {
        $.ajax({
            type: "POST",
            url: url,
            dataType: "json",
            data: data,
            success: function (data) {
                success(data);
            },
            error: function (e) {
                error(e);
            }
        });
    }
</script>
</body>
</html>
